<script setup>
import { ref, computed, onMounted } from 'vue'
import { Plus, ArrowUp, ArrowDown, Edit, Delete,Sort} from '@element-plus/icons-vue'
import { ElMessageBox, ElNotification } from 'element-plus';

// 标签页数据
const activeTab = ref('option-value')
const tabs = [
  { id: 'option-value', name: '选项值设置' },
  { id: 'process', name: '流程设置' },
  { id: 'permission', name: '权限设置' }
]

// ========== 选项值设置数据 ==========
const activeSidebar = ref('follow-stage')
const sidebarItems = [
  { id: 'follow-stage', name: '跟进阶段' },
  { id: 'customer-source', name: '客户来源' },
  { id: 'customer-area', name: '客户片区' },
  { id: 'lost-reason', name: '丢单原因' },
  { id: 'clue-level', name: '线索等级' }
]

// 使用 ref 使选项数据可响应
const allOptions = ref({
  'follow-stage': [
    { id: 1, name: '有意向', disabled: false },
    { id: 2, name: '初步联系', disabled: false },
    { id: 3, name: '待签约', disabled: false },
    { id: 4, name: '暂停沟通', disabled: false },
    { id: 5, name: '待联系', disabled: false },
    { id: 6, name: '未成交', disabled: false },
    { id: 7, name: '深度沟通', disabled: false },
    { id: 8, name: '方案确认', disabled: false }
  ],
  'customer-source': [
    { id: 1, name: '官网注册', disabled: false },
    { id: 2, name: '渠道推荐', disabled: false },
    { id: 3, name: '市场活动', disabled: false },
    { id: 4, name: '客户转介绍', disabled: false },
    { id: 5, name: '线上广告', disabled: false }
  ],
  'customer-area': [
    { id: 1, name: '华东地区', disabled: false },
    { id: 2, name: '华南地区', disabled: false },
  ],
  'lost-reason': [
    { id: 1, name: '价格过高', disabled: false },
    { id: 2, name: '功能不符', disabled: false },
    { id: 3, name: '竞品选择', disabled: false },
    { id: 4, name: '预算不足', disabled: false },
    { id: 5, name: '暂无需求', disabled: false }
  ],
  'clue-level': [
    { id: 1, name: 'A级（高意向）', disabled: false },
    { id: 2, name: 'B级（中等意向）', disabled: false },
    { id: 3, name: 'C级（初步意向）', disabled: false },
    { id: 4, name: 'D级（需培育）', disabled: false }
  ]
})

const currentOptions = computed(() => {
  return allOptions.value[activeSidebar.value] || []
})

// 对话框控制
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)

// 表单数据
const newOptionName = ref('')
const editingOption = ref(null)

// 拖拽相关
const draggingOption = ref(null)

// ========== 选项值设置方法 ==========

// 打开添加选项对话框
const openAddDialog = () => {
  newOptionName.value = ''
  addDialogVisible.value = true
}

// 添加新选项
const addOption = () => {
  if (!newOptionName.value.trim()) {
    ElMessage.warning('请输入选项名称')
    return
  }
  
  const currentList = allOptions.value[activeSidebar.value]
  const newId = currentList.length > 0 ? Math.max(...currentList.map(o => o.id)) + 1 : 1
  
  currentList.push({
    id: newId,
    name: newOptionName.value.trim(),
    disabled: false
  })
  
  addDialogVisible.value = false
  ElMessage.success('添加成功')
}

// 打开编辑选项对话框
const openEditDialog = (option) => {
  editingOption.value = { ...option }
  editDialogVisible.value = true
}

// 保存编辑
const saveEdit = () => {
  if (!editingOption.value.name.trim()) {
    ElMessage.warning('请输入选项名称')
    return
  }
  
  const currentList = allOptions.value[activeSidebar.value]
  const index = currentList.findIndex(o => o.id === editingOption.value.id)
  
  if (index !== -1) {
    currentList[index].name = editingOption.value.name.trim()
  }
  
  editDialogVisible.value = false
  ElMessage.success('修改成功')
}

// 删除选项
const deleteOption = (option) => {
  ElMessageBox.confirm(
    `确定删除选项"${option.name}"吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    const currentList = allOptions.value[activeSidebar.value]
    const index = currentList.findIndex(o => o.id === option.id)
    
    if (index !== -1) {
      currentList.splice(index, 1)
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    // 用户取消删除
  })
}

// 上移选项
const moveUp = (index) => {
  if (index <= 0) return
  
  const currentList = allOptions.value[activeSidebar.value]
  const temp = currentList[index]
  currentList[index] = currentList[index - 1]
  currentList[index - 1] = temp
}

// 下移选项
const moveDown = (index) => {
  const currentList = allOptions.value[activeSidebar.value]
  if (index >= currentList.length - 1) return
  
  const temp = currentList[index]
  currentList[index] = currentList[index + 1]
  currentList[index + 1] = temp
}

// 拖拽开始
const onDragStart = (event, option, index) => {
  if (option.disabled) {
    event.preventDefault()
    return
  }
  
  draggingOption.value = { option, index }
  event.dataTransfer.effectAllowed = 'move'
  
  // 设置拖拽图像
  setTimeout(() => {
    event.target.classList.add('dragging')
  }, 0)
}

// 拖拽经过
const onDragOver = (event) => {
  event.preventDefault()
  event.dataTransfer.dropEffect = 'move'
}

// 拖拽放置
const onDrop = (event, targetIndex) => {
  event.preventDefault()
  
  if (!draggingOption.value) return
  
  const { option, index: sourceIndex } = draggingOption.value
  const currentList = allOptions.value[activeSidebar.value]
  
  if (sourceIndex === targetIndex) {
    // 拖拽到同一位置，不做处理
    return
  }
  
  // 从原位置移除
  currentList.splice(sourceIndex, 1)
  
  // 插入到新位置
  if (targetIndex > sourceIndex) {
    // 向下拖拽，需要调整目标索引
    currentList.splice(targetIndex - 1, 0, option)
  } else {
    currentList.splice(targetIndex, 0, option)
  }
  
  draggingOption.value = null
  
  // 移除拖拽样式
  document.querySelectorAll('.option-item').forEach(el => {
    el.classList.remove('dragging')
  })
}

// 拖拽结束
const onDragEnd = () => {
  draggingOption.value = null
  
  // 移除拖拽样式
  document.querySelectorAll('.option-item').forEach(el => {
    el.classList.remove('dragging')
  })
}

// ========== 流程设置数据 ==========
const processEnabled = ref(true)

const infoFields = ref({
  customerDepartment: false,
  companyName: false,
  customerLevel: false,
  customerShortName: false,
  vatType: false,
  detailedAddress: false,
  customerSource: false,
  customerArea: false,
  customerTags: false,
  customerNumber: false,
  industryCategory: false,
  taxNumber: false,
  location: false,
  contactInfo: false
})

// ========== 权限设置数据 ==========
const activePermissionSidebar = ref('clue-management')
const permissionSidebarItems = [
  { id: 'clue-management', name: '线索管理' },
  { id: 'channel-management', name: '渠道管理' },
  { id: 'delete-permission', name: '彻底删除' }
]

// 权限设置数据
const requiredFieldsEnabled = ref(false)
const autoClaimEnabled = ref(true)
const autoReleaseEnabled = ref(false)
const releaseByContact = ref(false)
const releaseByDeal = ref(false)
const contactDays = ref('')
const dealDays = ref('')
const duplicateControlEnabled = ref(false)

const poolManagers = [
  { id: 1, name: '张小姐' },
  { id: 2, name: '邓硕' }
]

const exportManagers = [
  { id: 1, name: '张小姐' },
  { id: 2, name: '邓硕' }
]
</script>

<template>
  <div class="system-setting">
    <!-- 顶部标签栏 -->
    <div class="tab-bar">
      <div 
        v-for="tab in tabs" 
        :key="tab.id"
        class="tab"
        :class="{ active: activeTab === tab.id }"
        @click="activeTab = tab.id"
      >
        {{ tab.name }}
      </div>
    </div>

    <!-- 选项值设置页面 -->
    <div v-if="activeTab === 'option-value'" class="content">
      <div class="sidebar">
        <div 
          v-for="item in sidebarItems" 
          :key="item.id"
          class="sidebar-item"
          :class="{ active: activeSidebar === item.id }"
          @click="activeSidebar = item.id"
        >
          {{ item.name }}
        </div>
      </div>
      
      <div class="main-content">
        <div class="header-actions">
          <el-button type="primary" size="small" @click="openAddDialog">
            <el-icon><Plus /></el-icon>
            添加选项
          </el-button>
          <p class="tip-text">点击 "↑" 上移、"↓" 下移或 "↔" 拖动，以调整菜单显示顺序</p>
        </div>
        
        <div class="options-list">
          <div 
            v-for="(option, index) in currentOptions" 
            :key="option.id"
            class="option-item"
            :class="{ disabled: option.disabled, dragging: draggingOption && draggingOption.option.id === option.id }"
            draggable="true"
            @dragstart="onDragStart($event, option, index)"
            @dragover="onDragOver($event)"
            @drop="onDrop($event, index)"
            @dragend="onDragEnd"
          >
            <div class="option-content">
              <el-icon class="drag-handle"><Sort /></el-icon>
              <span class="option-order">{{ index + 1 }}</span>
              <span class="option-name">{{ option.name }}</span>
            </div>
            <div class="option-actions">
              <el-button 
                v-if="!option.disabled"
                type="text" 
                size="small"
                :disabled="index === 0"
                @click="moveUp(index)"
              >
                <el-icon><ArrowUp /></el-icon>
              </el-button>
              <el-button 
                v-if="!option.disabled"
                type="text" 
                size="small"
                :disabled="index === currentOptions.length - 1"
                @click="moveDown(index)"
              >
                <el-icon><ArrowDown /></el-icon>
              </el-button>
              <el-button 
                v-if="!option.disabled"
                type="text" 
                size="small"
                @click="openEditDialog(option)"
              >
                <el-icon><Edit /></el-icon>
              </el-button>
              <el-button 
                v-if="!option.disabled"
                type="text" 
                size="small"
                style="color: #f56c6c;"
                @click="deleteOption(option)"
              >
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 流程设置页面 -->
    <div v-if="activeTab === 'process'" class="content">
      <div class="sidebar">
        <div class="sidebar-item active">成交流程</div>
      </div>
      
      <div class="main-content">
        <div class="process-config">
          <div class="config-item">
            <div class="config-label">
              <span>开启流程管理</span>
              <span class="config-tip">开启后，线索将按照设定的流程阶段进行流转</span>
            </div>
            <div class="config-control">
              <el-switch v-model="processEnabled" />
            </div>
          </div>
          
          <div v-if="processEnabled" class="process-stages">
            <!-- 开始转成交 -->
            <div class="stage-item">
              <div class="stage-header">
                <div class="stage-radio">
                  <el-radio label="start">开始转成交</el-radio>
                </div>
              </div>
              <div class="stage-content">
                <p class="stage-description">线索如果跟进成功，则需要转成交</p>
              </div>
            </div>
            
            <!-- 客户信息补全 -->
            <div class="stage-item">
              <div class="stage-header">
                <div class="stage-radio">
                  <el-radio label="info">客户信息补全</el-radio>
                </div>
              </div>
              <div class="stage-content">
                <p class="stage-description">需要先补充客户信息，可设置必填项</p>
                <div class="info-fields">
                  <div class="field-group">
                    <el-checkbox v-model="infoFields.customerDepartment">客户所属部门</el-checkbox>
                    <el-checkbox v-model="infoFields.companyName">企业名称</el-checkbox>
                    <el-checkbox v-model="infoFields.customerLevel">客户等级</el-checkbox>
                    <el-checkbox v-model="infoFields.customerShortName">客户简称</el-checkbox>
                    <el-checkbox v-model="infoFields.vatType">增值税类型</el-checkbox>
                  </div>
                  <div class="field-group">
                    <el-checkbox v-model="infoFields.detailedAddress">详细地址</el-checkbox>
                    <el-checkbox v-model="infoFields.customerSource">客户来源</el-checkbox>
                    <el-checkbox v-model="infoFields.customerArea">客户片区</el-checkbox>
                    <el-checkbox v-model="infoFields.customerTags">客户标签</el-checkbox>
                    <el-checkbox v-model="infoFields.customerNumber">客户编号</el-checkbox>
                  </div>
                  <div class="field-group">
                    <el-checkbox v-model="infoFields.industryCategory">行业分类</el-checkbox>
                    <el-checkbox v-model="infoFields.taxNumber">企业税号</el-checkbox>
                    <el-checkbox v-model="infoFields.location">所在地区</el-checkbox>
                    <el-checkbox v-model="infoFields.contactInfo">联系人及联系方式</el-checkbox>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 创建合同或订单 -->
            <div class="stage-item">
              <div class="stage-header">
                <div class="stage-radio">
                  <el-radio  label="contract">创建合同或订单</el-radio>
                </div>
              </div>
              <div class="stage-content">
                <p class="stage-description">开启后，必须创建合同或订单，才能转成交</p>
              </div>
            </div>
            
            <!-- 已成交 -->
            <div class="stage-item">
              <div class="stage-header">
                <div class="stage-radio">
                  <el-radio label="success">已成交</el-radio>
                </div>
              </div>
              <div class="stage-content">
                <p class="stage-description">线索成功转为客户</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 权限设置页面 -->
    <div v-if="activeTab === 'permission'" class="content">
      <div class="sidebar">
        <div 
          v-for="item in permissionSidebarItems" 
          :key="item.id"
          class="sidebar-item"
          :class="{ active: activePermissionSidebar === item.id }"
          @click="activePermissionSidebar = item.id"
        >
          {{ item.name }}
        </div>
      </div>
      
      <div class="main-content">
        <div v-if="activePermissionSidebar === 'clue-management'" class="permission-config">
          <!-- 线索必填项 -->
          <div class="setting-item">
            <div class="setting-header">
              <label class="setting-label">线索必填项</label>
              <el-switch v-model="requiredFieldsEnabled" class="disabled" />
            </div>
            <p class="setting-description">可设置新建/编辑线索时需要校验的必填项</p>
          </div>

          <!-- 线索池管理员 -->
          <div class="setting-item">
            <div class="setting-header">
              <label class="setting-label">线索池管理员</label>
            </div>
            <p class="setting-description">
              只有配置的人员能够查询线索池的数据，且能够进行彻底删除的操作。默认机构负责人有此操作权限。
            </p>
            <div class="manager-list">
              <el-tag 
                v-for="manager in poolManagers" 
                :key="manager.id"
                closable
                class="manager-tag"
              >
                {{ manager.name }}
              </el-tag>
              <el-button type="primary" text>+ 添加管理员</el-button>
            </div>
          </div>

          <!-- 自主认领模式 -->
          <div class="setting-item">
            <div class="setting-header">
              <label class="setting-label">自主认领模式</label>
              <el-switch v-model="autoClaimEnabled" />
            </div>
            <p class="setting-description">
              开启后，员工可查看属于自己部门的无人跟进的线索，并且进行认领跟进。
            </p>
          </div>

          <!-- 线索自动释放 -->
          <div class="setting-item">
            <div class="setting-header">
              <label class="setting-label">线索自动释放</label>
              <el-switch v-model="autoReleaseEnabled" class="disabled" />
            </div>
            <div class="nested-settings">
              <div class="nested-item">
                <el-checkbox v-model="releaseByContact" class="disabled" />
                <label>超过 
                  <el-input 
                    v-model="contactDays" 
                    class="disabled small-input" 
                    placeholder="7" 
                  /> 
                  天未联系自动释放
                </label>
              </div>
              <div class="nested-item">
                <el-checkbox v-model="releaseByDeal" class="disabled" />
                <label>超过 
                  <el-input 
                    v-model="dealDays" 
                    class="disabled small-input" 
                    placeholder="30" 
                  /> 
                  天未成交自动释放 (分配后超时未成交自动释放)
                </label>
              </div>
            </div>
          </div>

          <!-- 线索导出 -->
          <div class="setting-item">
            <div class="setting-header">
              <label class="setting-label">线索导出</label>
            </div>
            <p class="setting-description">
              默认仅机构负责人拥有线索导出权限，也可以指定其他人。
            </p>
            <div class="manager-list">
              <el-tag 
                v-for="exporter in exportManagers" 
                :key="exporter.id"
                closable
                class="manager-tag"
              >
                {{ exporter.name }}
              </el-tag>
              <el-button type="primary" text>+ 添加导出人员</el-button>
            </div>
          </div>

          <!-- 导入线索重复控制 -->
          <div class="setting-item">
            <div class="setting-header">
              <label class="setting-label">导入线索重复控制</label>
              <el-switch v-model="duplicateControlEnabled" class="disabled" />
            </div>
            <p class="setting-description">
              开启后，如果导入的线索名称，与客户模块的客户简称、全称一致；或线索手机号，与客户模块的客户联系人、线索模块待跟进的线索手机号一致，则不允许导入。
            </p>
          </div>

          <div class="setting-item">
            <div class="setting-header">
              <label class="setting-label">控制员工负责线索数量</label>
              <el-switch v-model="duplicateControlEnabled" class="disabled" />
            </div>
            <div class="nested-item">
                <el-checkbox v-model="releaseByDeal" class="disabled" />
                <label>最多分配 
                  <el-input 
                    v-model="dealDays" 
                    class="disabled small-input" 
                    placeholder="" 
                  /> 
                  个线索
                </label>
              </div>
          </div>
        </div> 
        
        <div v-if="activePermissionSidebar === 'channel-management'" class="permission-config">
           <div class="setting-item">
              <div>
                <label class="setting-label">新增/导入渠道 </label>
                <el-switch v-model="duplicateControlEnabled" class="disabled" />
              </div>
              <p class="setting-description">
                  开启后，只有指定人员能够新增和导入渠道信息。关闭后，所有人都可以新增和导入渠道信息。
              </p>  
          </div>
          <div class="setting-item">
            <div>
              <label class="setting-label">导出渠道</label>
            </div>
            <p class="setting-description">
                默认机构负责人拥有导出渠道权限，也可以指定其他人。
            </p> 
            <p class="manager-list">
              张小姐
            </p>
          </div>
        </div>

        <div v-if="activePermissionSidebar === 'delete-permission'" class="permission-config">
          <div class="setting-item">
              <div>
                <label class="setting-label">回收站彻底删除</label>
              </div>
              <p class="setting-description">
                  默认仅机构负责人拥有彻底删除的权限，也可以指定其他人。
              </p> 
              <p class="manager-list">
              张小姐
          </p> 
          </div>
        </div>
      </div>
    </div>

    <!-- 添加选项对话框 -->
    <el-dialog
      v-model="addDialogVisible"
      title="添加选项"
      width="500px"
      center
    >
      <el-form :model="{ name: newOptionName }">
        <el-form-item label="选项名称">
          <el-input
            v-model="newOptionName"
            placeholder="请输入选项名称"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addOption">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑选项对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑选项"
      width="500px"
      center
    >
      <el-form :model="editingOption" v-if="editingOption">
        <el-form-item label="选项名称">
          <el-input
            v-model="editingOption.name"
            placeholder="请输入选项名称"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.system-setting {
  min-height: 100vh;
  background: #f5f5f5;
  font-family: "Microsoft Yahei", sans-serif;
  font-size: 14px;
  color: #333;

  /* 顶部标签栏样式 */
  .tab-bar {
    background: white;
    padding: 0 20px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 20px;

    .tab {
      display: inline-block;
      padding: 12px 24px;
      cursor: pointer;
      color: #666;
      text-decoration: none;
      border-bottom: 2px solid transparent;
      transition: all 0.3s ease;

      &.active {
        color: #ff6700;
        border-bottom: 2px solid #ff6700;
        font-weight: bold;
      }

      &:hover {
        color: #ff6700;
      }
    }
  }

  /* 内容区域通用样式 */
  .content {
    display: flex;
    min-height: 600px;
    background: white;
    margin: 0 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .sidebar {
      width: 200px;
      background: #fafafa;
      border-right: 1px solid #e8e8e8;
      padding: 20px 0;

      .sidebar-item {
        padding: 12px 20px;
        cursor: pointer;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;

        &:hover {
          background: #f0f0f0;
        }

        &.active {
          background: #fff2e8;
          border-left: 3px solid #ff6700;
          color: #ff6700;
          font-weight: bold;
        }
      }
    }

    .main-content {
      flex: 1;
      padding: 20px;
      background: white;
    }
  }

  /* 禁用状态样式 */
  .disabled {
    pointer-events: none;
    background-color: #f5f5f5 !important;
    color: #999 !important;
    border-color: #ddd !important;
    cursor: not-allowed !important;

    input,
    select,
    button {
      pointer-events: none;
      background-color: #f5f5f5 !important;
      color: #999 !important;
      border-color: #ddd !important;
      cursor: not-allowed !important;
    }
  }

  /* ========== 选项值设置样式 ========== */
  .content {
    .main-content {
      .header-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e8e8e8;

        .tip-text {
          margin: 0;
          color: #999;
          font-size: 12px;
        }
      }

      .options-list {
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        overflow: hidden;

        .option-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 16px;
          border-bottom: 1px solid #e8e8e8;
          background: white;
          transition: all 0.3s;
          cursor: grab;

          &:last-child {
            border-bottom: none;
          }

          &:hover {
            background: #fafafa;
          }

          &.dragging {
            background: #f0f9ff;
            border: 1px dashed #409eff;
            box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
          }

          &.disabled {
            background: #f5f5f5;
            cursor: not-allowed;

            &:hover {
              background: #f5f5f5;
            }

            .option-name {
              color: #999;
            }
          }

          .option-content {
            display: flex;
            align-items: center;
            gap: 12px;

            .drag-handle {
              color: #c0c4cc;
              cursor: grab;
              transition: color 0.3s;

              &:hover {
                color: #409eff;
              }
            }

            .option-order {
              color: #999;
              font-size: 12px;
              min-width: 20px;
            }

            .option-name {
              color: #333;
            }
          }

          .option-actions {
            display: flex;
            gap: 4px;
          }
        }
      }
    }
  }

  /* ========== 流程设置样式 ========== */
  .content {
    .main-content {
      .process-config {
        max-width: 800px;

        .config-item {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          padding: 20px 0;
          border-bottom: 1px solid #e8e8e8;

          .config-label {
            display: flex;
            flex-direction: column;
            gap: 4px;

            .config-tip {
              color: #999;
              font-size: 12px;
            }
          }

          .config-control {
            display: flex;
            align-items: center;
          }
        }

        .process-stages {
          margin-top: 30px;

          .stage-item {
            margin-bottom: 20px;
            border: 1px solid #e8e8e8;
            border-radius: 6px;
            overflow: hidden;

            .stage-header {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 16px;
              background: #fafafa;
              border-bottom: 1px solid #e8e8e8;

              .stage-radio {
                display: flex;
                align-items: center;
              }

              .stage-switch {
                display: flex;
                align-items: center;
              }
            }

            .stage-content {
              padding: 16px;
              background: white;

              .stage-description {
                color: #666;
                margin: 0 0 16px 0;
                font-size: 13px;
              }

              .info-fields {
                display: flex;
                flex-direction: column;
                gap: 16px;

                .field-group {
                  display: flex;
                  gap: 24px;

                  .el-checkbox {
                    width: 140px;
                    margin-bottom: 8px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  /* ========== 权限设置样式 ========== */
  .content {
    .main-content {
      .permission-config {
        max-width: 800px;

        .setting-item {
          padding: 20px 0;
          border-bottom: 1px solid #e8e8e8;

          &:last-child {
            border-bottom: none;
          }

          .setting-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;

            .setting-label {
              font-weight: 600;
              color: #333;
              font-size: 14px;
            }
          }

          .setting-description {
            color: #666;
            font-size: 13px;
            line-height: 1.5;
            margin: 0;
          }

          .nested-settings {
            margin-top: 16px;
            padding-left: 24px;

            .nested-item {
              display: flex;
              align-items: center;
              gap: 8px;
              margin-bottom: 12px;

              &:last-child {
                margin-bottom: 0;
              }
            }
          }

          .small-input {
            width: 80px;
            margin: 0 4px;
          }

          .manager-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;

            .manager-tag {
              background: #f0f9ff;
              border-color: #91d5ff;
              color: #1890ff;
            }
          }
        }

        .other-permissions {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 300px;
          color: #999;
        }
      }
    }
  }
}
</style>